/**
 * 设计方案画廊组件
 */

import React, { useState } from 'react';
import { DesignSchema } from '../types';
import DesignPreview from './DesignPreview';
import DesignModal from './DesignModal';

interface DesignGalleryProps {
  designs: DesignSchema[];
  onSelect: (design: DesignSchema) => void;
}

const DesignGallery: React.FC<DesignGalleryProps> = ({ designs, onSelect }) => {
  const [selectedDesign, setSelectedDesign] = useState<DesignSchema | null>(null);

  const handlePreview = (design: DesignSchema) => {
    console.log('DesignGallery: 点击预览设计方案', design.id, design.title);
    setSelectedDesign(design);
  };

  const handleCloseModal = () => {
    console.log('DesignGallery: 关闭预览模态框');
    setSelectedDesign(null);
  };

  const handleSelect = (design: DesignSchema) => {
    console.log('DesignGallery: 用户选择了设计方案', design.id, design.title);
    onSelect(design);
    setSelectedDesign(null);
  };

  return (
    <>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(2, 1fr)',
          gap: '12px',
          marginTop: '8px',
        }}
      >
        {designs.map((design) => {
          console.log('DesignGallery: 渲染设计方案', design.id, design.title);
          return (
            <DesignPreview
              key={design.id}
              design={design}
              onClick={() => handlePreview(design)}
              onSelect={() => handleSelect(design)}
            />
          );
        })}
      </div>

      {/* 放大预览模态框 */}
      {selectedDesign && (
        <DesignModal
          design={selectedDesign}
          onClose={handleCloseModal}
          onSelect={() => handleSelect(selectedDesign)}
        />
      )}
    </>
  );
};

export default DesignGallery;
